<template>
  <q-layout view="lHh Lpr lFf">
    <q-layout-header class="no-shadow">
      <layout-header v-if="$q.screen.gt.sm"></layout-header>
    </q-layout-header>
    <q-layout-footer v-if="$q.screen.lt.sm">
      <layout-footer></layout-footer>
    </q-layout-footer>
    <q-page-container :class="{'bg-grey-1': $q.screen.gt.sm}">
      <a-page id="dynasty" search-disabled style="background-color: #fff">
        <div slot="bar" class="bg-img-center column flex-center" :style="{height: imgHeight+'px','background-image': 'url('+ instance.cover +')'}">
          <div><h1 class="size-48 text-white q-my-lg text-shadow-black" style="margin: 0">{{ instance.title }}</h1></div>
          <div class="ellipsis size-18 bold q-mt-md text-white text-shadow-black">{{ instance.description }}</div>
        </div>
        <a-map-image-boxes v-if="querySet" :maps="querySet"></a-map-image-boxes>
      </a-page>
      <div id="container-footer" v-if="$q.screen.gt.sm" class="size-14 bg-grey-9 q-py-xl row justify-center">
        <div class="col-xl-8 col-lg-10 col-md-12 col-sm-12 q-px-sm">
          <div class="row q-mb-md">
            <div class="col">
              <div class="q-my-md text-grey-4">
                本作品为古代交通路线的示意图，并不能反映当时的真实状况。本作品仅用于《中国古代道路交通文化史》的教学，未经授权不得用于他途。
              </div>
              <div class="q-pb-sm text-grey-4">
                本专栏由<a href="https://www.ageeye.cn" class="text-blue-2">发现中国-地图分享知识</a>提供技术支持。
              </div>
            </div>
            <div class="row q-ml-md text-grey-4">
              <div class="q-mr-md text-center">
                <img width="100px" src="/statics/bar/jts-qrcode.jpg"/>
                <div class="size-12">作者微信二维码</div>
              </div>
            </div>
          </div>
          <div class="q-pt-md border-top-1">
            <a target="_blank" class="text-grey-6" href="http://www.miitbeian.gov.cn/">蜀ICP备12026271</a>
            <a target="_blank" class="text-grey-6" href=""><q-icon name="mail"/> dev@ageeye.cn</a>
            <a target="_blank" class="text-grey-6" href="https://www.ageeye.cn">Copyright © 2015-2018 发现中国</a>
          </div>
        </div>
      </div>
    </q-page-container>
    <q-page-sticky position="bottom-right" :offset="[18, 18]">
      <q-btn class="gt-sm animate-pop" v-back-to-top round color="negative" icon="keyboard_arrow_up" />
    </q-page-sticky>
  </q-layout>
</template>

<script>
  import { querySetMixin } from '../../mixins'
  // 赵春阳中国古代交通史

  export default {
    title: 'PageJts',
    mixins: [querySetMixin],
    props: {
    },
    data () {
      return {
        api: '/api/topic/{id}/special_topic_maps/',
        infinite: true,
        id: 'jts',
        limit: 12,
        instance: null
      }
    },
    created () {
      this.getData()
    },
    computed: {
      imgHeight () {
        const windowWidth = this.$q.screen.width

        if (windowWidth > 1600) {
          return 480
        } else if (windowWidth > 1200) {
          return 400
        } else if (windowWidth > 800) {
          return 320
        } else if (windowWidth > 576) {
          return 220
        } else {
          return 180
        }
      }
    },
    methods: {
      async getData () {
        await this.getRequest({
          api: '/api/topic/{id}/special_topic/',
          id: 'jts'
        })
      }
    }
  }
</script>
